<template>
  <page-container>
    <div class="take-list">
      <!-- <div class="take-type-list">
      <div
        class="take-type-item"
        v-for="(item, index) in takeTypeList"
        :key="index"
        :class="{ active: currentTakeTypeItem == index }"
        @click="onTakeTypeChange(index)"
      >
        {{ item.label }}
      </div>
    </div> -->
      <div class="take-money-list">
        <a-card :bordered="false">
          <div class="ant-descriptions-title">门店提现</div>
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :md="5" :sm="24">
                  <a-form-item>
                    <a-range-picker v-model="orderDateRange">
                      <a-icon slot="suffixIcon" type="calendar" />
                    </a-range-picker>
                  </a-form-item>
                </a-col>
                <a-col :md="4" :sm="24">
                  <a-form-item>
                    <a-input v-model="queryParam.name" placeholder="请输入名称"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md="4" :sm="24">
                  <a-form-item>
                    <a-button type="primary" @click="$refs.table.refresh()" icon="search">查询</a-button>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <s-table
            ref="table"
            size="default"
            rowKey="id"
            :columns="columns"
            :data="loadStoreData"
            showPagination="auto"
            :pagination="{ 'show-total': total => `共 ${total} 条` }"
          >
            <template slot="status" slot-scope="text, record">
              <a-tag :color="getStatusName(record) === '正常' || getStatusName(record) ==='通过审核' ? 'blue' : 'red'">{{
                getStatusName(record)
              }}</a-tag>
            </template>
            <template slot="store_type" slot-scope="text">
              <a-tag
                :color="
                  text === 'clothes' ? 'blue' : text === 'appliance' ? 'cyan' : text === 'house' ? 'green' : 'orange'
                "
              >{{ text | storeTypeFilter }}</a-tag
              >
            </template>
            <span slot="actions" slot-scope="text, record">
              <template v-if="record.status === 0">
                <a @click="handleApply(record, 0)">审核通过</a>
                <a-divider type="vertical"></a-divider>
                <a @click="handleDownTake(record, 0)" style="color:red">拒绝审核</a>
              </template>
            </span>
          </s-table>
          <div class="ant-descriptions-title" style="margin-top:24px">服务商提现</div>
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="24">
                <a-col :md="5" :sm="24">
                  <a-form-item>
                    <a-range-picker v-model="orderDateRange">
                      <a-icon slot="suffixIcon" type="calendar" />
                    </a-range-picker>
                  </a-form-item>
                </a-col>
                <a-col :md="4" :sm="24">
                  <a-form-item>
                    <a-input v-model="queryParam.name" placeholder="请输入名称"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md="4" :sm="24">
                  <a-form-item>
                    <a-button type="primary" @click="$refs.table2.refresh()" icon="search">查询</a-button>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <s-table
            ref="table2"
            size="default"
            rowKey="id"
            :columns="columns2"
            :data="loadProviderData"
            showPagination="auto"
            :pagination="{ 'show-total': total => `共 ${total} 条` }"
          >
            <template slot="status" slot-scope="text, record">
              <a-tag :color="getStatusName(record) === '正常' || getStatusName(record) ==='通过审核' ? 'blue' : 'red'">{{
                getStatusName(record)
              }}</a-tag>
            </template>
            <span slot="actions" slot-scope="text, record">
              <template v-if="record.status === 0">
                <a @click="handleApply(record, 1)">审核通过</a>
                <a-divider type="vertical"></a-divider>
                <a @click="handleDownTake(record, 1)" style="color:red">拒绝审核</a>
              </template>
            </span>
          </s-table>
        </a-card>
      </div>
    </div>
  </page-container>
</template>

<script>
import {
  storeTakeMoneyApplyList,
  providerTakeMoneyApplyList,
  storeTakeMoneyApplyPutTake,
  providerTakeMoneyApplyPutTake,
  storeTakeMoneyApplyDownTake,
  providerTakeMoneyApplyDownTake
} from '@/api/stat'
import { STable } from '@/components/index'
import storeType from '@/mixins/storeType'
const columns = [
  {
    title: '店名',
    dataIndex: 'store.name'
  },
  {
    title: '店类型',
    dataIndex: 'store_type',
    scopedSlots: { customRender: 'store_type' }
  },
  {
    title: '省市区',
    dataIndex: 'store',
    customRender (text) {
      return text.province + '|' + text.city + '|' + text.area
    }
  },
  {
    title: '管理员电话',
    dataIndex: 'manager.mobile'
  },
  {
    title: '卡号',
    dataIndex: 'bank_card'
  },
  {
    title: '卡号户主',
    dataIndex: 'bank_card_name'
  },
  {
    title: '银行名',
    dataIndex: 'bank_name'
  },
  {
    title: '提款金额',
    dataIndex: 'money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '180px',
    scopedSlots: { customRender: 'actions' }
  }
]

const columns2 = [
  {
    title: '服务商名称',
    dataIndex: 'manager.name'
  },
  {
    title: '省市区',
    dataIndex: 'manager',
    customRender (text) {
      return text.province + '|' + text.city + '|' + text.area
    }
  },
  {
    title: '电话',
    dataIndex: 'manager.mobile'
  },
  {
    title: '卡号',
    dataIndex: 'bank_card'
  },
  {
    title: '卡号户主',
    dataIndex: 'bank_card_name'
  },
  {
    title: '银行名',
    dataIndex: 'bank_name'
  },
  {
    title: '提款金额',
    dataIndex: 'money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '180px',
    scopedSlots: { customRender: 'actions' }
  }
]

export default {
  components: {
    STable
  },
  mixins: [storeType],
  data () {
    this.columns = columns
    this.columns2 = columns2
    return {
      takeTypeList: [
        {
          label: '门店提现',
          method: storeTakeMoneyApplyList,
          applyMethod: storeTakeMoneyApplyPutTake,
          downTakeMethod: storeTakeMoneyApplyDownTake
        },
        {
          label: '服务商提现',
          method: providerTakeMoneyApplyList,
          applyMethod: providerTakeMoneyApplyPutTake,
          downTakeMethod: providerTakeMoneyApplyDownTake
        }
        // {
        //   label: '乐管家提现'
        // },
        // {
        //   label: '待提现信息'
        // }
      ],
      queryParam: {},
      orderDateRange: [],
      currentTakeTypeItem: 0
    }
  },
  methods: {
    getStatusName (record) {
      if (record.status === 0) {
        const { bank_card: backCard, bank_card_name: bankCardName } = record
        const { bank_card: managerBankCard, bank_card_name: managerBankCardName } = record.manager
        if (backCard === managerBankCard && bankCardName === managerBankCardName) {
          return '正常'
        } else {
          return '存在风险'
        }
      }
      if (record.status === 1) {
        return '通过审核'
      }
      if (record.status === 2) {
        return '拒绝审核'
      }
    },
    loadData (parameter, currentTakeTypeItem) {
      const action = this.takeTypeList[currentTakeTypeItem].method
      return action(Object.assign(this.queryParam, parameter)).then(res => {
        return res.data
      })
    },
    loadStoreData (parameter) {
      return this.loadData(parameter, 0)
    },
    loadProviderData (parameter) {
      return this.loadData(parameter, 1)
    },
    onTakeTypeChange (index) {
      this.currentTakeTypeItem = index
      this.$refs.table.refresh()
    },
    handleApply (record, currentTakeTypeItem) {
      this.$confirm({
        title: '您确定要审核通过吗?',
        content: `审核通过后金额将打到商家账户`,
        okText: '通过',
        onOk: () => {
          const applyAction = this.takeTypeList[currentTakeTypeItem].applyMethod
          return applyAction({ id: record.id })
            .then(res => {
              this.$message.success(res.msg)
            })
            .catch(() => undefined)
        }
      })
    },
    handleDownTake (record, currentTakeTypeItem) {
      this.$confirm({
        title: '您确定要拒绝审核吗?',
        content: '审核驳回后该商家可继续申请审核',
        okText: '驳回',
        okType: 'danger',
        onOk: () => {
          const downAction = this.takeTypeList[currentTakeTypeItem].downTakeMethod
          return downAction({ id: record.id })
            .then(res => {
              this.$message.success(res.msg)
            })
            .catch(() => undefined)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.take-list {
  // position: absolute;
  // left: -24px;
  // top: -24px;
  // right: 0;
  // bottom: 0;
  display: flex;
  // .take-type-list {
  //   height: 100%;
  //   background: #fff;
  //   width: 256px;
  //   padding-top: 15px;
  //   .take-type-item {
  //     height: 40px;
  //     line-height: 40px;
  //     text-align: center;
  //     cursor: pointer;
  //     margin-bottom: 10px;
  //     color: rgba(0, 0, 0, 0.45);
  //     transition: all 0.3s;
  //     &.active {
  //       background: #e6f7ff;
  //       color: @primary-color;
  //       position: relative;
  //       &:after {
  //         position: absolute;
  //         content: '';
  //         right: 0;
  //         top: 0;
  //         height: 100%;
  //         background: @primary-color;
  //         width: 5px;
  //       }
  //     }
  //   }
  // }
  .take-money-list {
    // margin-left: 24px;
    // margin-top: 24px;
    flex: 1;
  }
}
</style>
